import * as React from 'react';
import { View, Text, Image, navigateTo, switchTab, Swiper, SwiperItem } from 'remax/wechat';
import NoticeBar from '@vant/weapp/dist/notice-bar';
import Search from '@vant/weapp/dist/search';
import Icon from '@vant/weapp/dist/icon';
import Grid from '@vant/weapp/dist/grid';
import GridItem from '@vant/weapp/dist/grid-item';
import VImage from '@vant/weapp/dist/image';
import Card from '@vant/weapp/dist/card';

import styles from './index.module.css';

let swiperItems = [
  { id: '1', src: 'https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c' },
  { id: '2', src: 'https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c' },
  { id: '3', src: 'https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c' },
];

let gridItems = [
  {
    text: '年货专区',
    image: 'https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c',
    urlTo: '/pages/catagory/index',
  },
  {
    text: '时令蔬菜',
    image: 'https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c',
    urlTo: '/pages/catagory/index',
  },
  {
    text: '日用百货',
    image: 'https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c',
    urlTo: '/pages/catagory/index',
  },
  {
    text: '休闲小食',
    image: 'https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c',
    urlTo: '/pages/catagory/index',
  },
  {
    text: '调料干货',
    image: 'https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c',
    urlTo: '/pages/catagory/index',
  },
  {
    text: '五谷杂粮',
    image: 'https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c',
    urlTo: '/pages/catagory/index',
  },
  {
    text: '饮料乳制',
    image: 'https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c',
    urlTo: '/pages/catagory/index',
  },
  {
    text: '水果系列',
    image: 'https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c',
    urlTo: '/pages/catagory/index',
  },
  {
    text: '冰鲜系列',
    image: 'https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c',
    urlTo: '/pages/catagory/index',
  },
  {
    text: '更多',
    image: 'https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c',
    urlTo: '/pages/catagory/index',
  },
];

let goodsItems = [
  { name: 'aaa', price: '7.00', tags: [] },
  { name: 'bbb', price: '17.00', tags: [] },
  { name: 'ccc', price: '27.00', tags: [] },
  { name: 'ddd', price: '37.00', tags: [] },
  { name: 'eee', price: '47.00', tags: [] },
  { name: 'fff', price: '57.00', tags: [] },
  { name: 'ggg', price: '67.00', tags: [] },
  { name: 'hhh', price: '77.00', tags: [] },
];

const Main = () => {
  const handleSearch = e => {
    console.log(e);
    navigateTo({ url: '/pages/main/search/index' });
  };

  return (
    <View className={styles.app}>
      <View
        style={{
          display: 'flex',
          flexWrap: 'nowrap',
          zIndex: 99,
          opacity: '.5',
        }}
      >
        <Search
          bindfocus={e => handleSearch(e)}
          placeholder="搜索商品"
          shape="round"
          background="#eee"
          style={{ width: '90vw' }}
        />
        <Icon
          name="chat-o"
          className={styles.chat}
          size="25px"
          bindclick={() => console.log('click')}
        >
          消息
        </Icon>
      </View>
      <View className={styles['swiper-tab']}>
        <Swiper
          autoplay
          circular
          vertical={false}
          indicatorDots
          // horizontal
          indicatorActiveColor="green"
          indicatorColor="#999"
          easing-function="linear"
        >
          {swiperItems.map(i => (
            <SwiperItem key={i.id}>
              <View>
                <Image className={styles['swiper-img']} lazy-load src={i.src} mode="aspectFill" />
              </View>
            </SwiperItem>
          ))}
        </Swiper>
      </View>
      <View className={styles.noticebar}>
        <NoticeBar
          // mode="link"
          leftIcon="volume"
          style={{ backgroundColor: '#fff' }}
          click={() => {
            console.log('notice');
          }}
          text="营业时间：09:00-20:00 夜间订单统一第二天发货,统一第二天发货"
        ></NoticeBar>
      </View>
      <View className={styles.flexTab}>
        <Grid column-num={5} /* gutter={10} */>
          {gridItems.map(i => (
            <GridItem
              key={i.text}
              use-slot
              border={false}
              linkType="switchTab"
              url={i.urlTo}
              style={{ background: 'transparent' }}
            >
              <VImage round width="40px" height="40px" fit="cover" src={i.image} />
              <Text style={{ fontSize: 20 }}>{i.text}</Text>
            </GridItem>
          ))}
        </Grid>
      </View>
      <View className={styles['swiper-tab']}>
        <Swiper>
          <SwiperItem>
            <View>
              <Text style={{ color: 'white', position: 'absolute', top: 20, left: 20 }}>
                年货专区
              </Text>
              <Text style={{ color: 'white', position: 'absolute', top: 20, right: 20 }}>更多</Text>
            </View>
            <View>
              <Image
                className={styles['swiper-img']}
                src="https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c"
                mode="aspectFill"
                onClick={() => console.log('ssssss')}
              />
            </View>
          </SwiperItem>
        </Swiper>
      </View>
      <View /* className={styles['swiper-tab']} */>
        <Swiper
          autoplay
          interval={3000}
          displayMultipleItems={2}
          previous-margin="20px"
          next-margin="20px"
        >
          {goodsItems.map(i => (
            <SwiperItem key={i.name}>
              <View onClick={() => console.log('123')}>
                <Card
                  num="2"
                  price={(i.price * 0.9).toFixed(2)}
                  origin-price={i.price}
                  desc="描述信息"
                  title={i.name}
                >
                  <View slot="thumb">
                    <Image
                      style={{
                        width: '176px',
                        height: '176px',
                        borderRadius: '20px',
                      }}
                      mode="aspectFill"
                      src="https://dummyimage.com/375x160?text=300x240&fg=fff&bg=0abf2c"
                    ></Image>
                  </View>
                </Card>
              </View>
            </SwiperItem>
          ))}
        </Swiper>
      </View>
    </View>
  );
};

export default Main;
